<div class="fixed-wapper"
  [ngClass]="{
  'header-fixed': isFixed
}">
  <div class="header-wapper"
    [ngClass]="{
      'header-shadow': showShadow,
      'header-maxwidth': hasMaxWidth
    }">
      <div class="header-left">
        <div *ngIf="showSlideButton" class="slide-menu-link" (click)="clickSlideMenu()">
          <span>
            <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <g id="slide-button-outer" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g id="slide-button-inner">
                      <path d="M18,6 L18,8 L0,8 L0,6 L18,6 Z M18,0 L18,2 L0,2 L0,0 L18,0 Z M14,12 L14,14 L0,14 L0,12 L14,12 Z"></path>
                  </g>
              </g>
            </svg>
          </span>
        </div>
        <ng-content select="d-header-logo"></ng-content>
        <d-search *ngIf="showSearch" [isKeyupSearch]="true" [placeholder]="searchPlaceholder" (searchFn)="onSearch($event)"></d-search>
      </div>
      <div class="header-right" [ngClass]="{'active': collapseMenuActive}">
        <ng-content select="d-header-menu"></ng-content>
        <ng-content select="d-ecosystem"></ng-content>
        <ng-content select="d-header-version-switch"></ng-content>
        <ng-content select="d-header-theme-switch"></ng-content>
        <ng-content select="d-header-language-switch"></ng-content>
        <div *ngIf="showGitStar">
          <iframe class="header-gitStar"
            [attr.src]="repoLink"
          ></iframe>
        </div>  
        <div *ngIf="showAvatar" class="header-avatar">
          <d-avatar
            [width]="40"
            [height]="40"
            [imgSrc]="userAvatar"
          ></d-avatar>
        </div>
      </div>
      <div id="headerCollapseMenu" class="header-collapse-menu" [ngClass]="{'active': collapseMenuActive}" (click)="toggleMenu($event)"><span></span></div>
  </div>
</div>